<template>
  <div style="margin-top: 20px">
    <a-row v-if="total > 0" class="m-t">
      <a-col :span="12">{{ leftText }}</a-col>
      <a-col :span="12" class="text-right" style="display: flex;justify-content: flex-end">
        <a-pagination
            hideOnSinglePage
            showQuickJumper
            :current="Number(current)"
            :total="Number(total)"
            :pageSize="Number(pageSize)"
            @change="handlePageClick"
        />
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  model: {
    prop: 'current',
    event: 'change.current',
  },
  props: {
    current: {
      type: [Number, String],
      default: 1,
    },
    total: {
      type: [Number, String],
      default: 1,
    },
    pageSize: {
      type: [Number, String],
      default: 30,
    },
  },
  data() {
    return {
      leftText: '',
    }
  },
  watch: {
    current() {
      // eslint-disable-next-line no-mixed-operators
      this.leftText = `显示 ${(this.current - 1) * this.pageSize + 1} 到 ${this
          .current * this.pageSize} 项，共 ${this.total} 项`
    },
    total() {
      // eslint-disable-next-line no-mixed-operators
      this.leftText = `显示 ${(this.current - 1) * this.pageSize + 1} 到 ${this
          .current * this.pageSize} 项，共 ${this.total} 项`
    },
    pageSize() {
      // eslint-disable-next-line no-mixed-operators
      this.leftText = `显示 ${(this.current - 1) * this.pageSize + 1} 到 ${this
          .current * this.pageSize} 项，共 ${this.total} 项`
    },
  },
  mounted() {
    // eslint-disable-next-line no-mixed-operators
    this.leftText = `显示 ${(this.current - 1) * this.pageSize + 1} 到 ${this
        .current * this.pageSize} 项，共 ${this.total} 项`
  },
  methods: {
    handlePageClick(page) {
      this.$emit('change',  page )
      this.$emit('change.current', page)
    },
  },
}
</script>

